/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
  background-color: red;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.375rem red;
  border-radius: 0.625rem;
  background-color: red;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 0.625rem;
  box-shadow: inset 0 0 0.375rem #999;
  background-color: #333;
}

//首先定义背景
.banner {
  background-color: rgba(0, 0, 0, 1);
  min-height: 100vh;
  width: 100%;
  padding-top: 10vh;
  color: #fff;

  .title {
    background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#eee),
      color-stop(40%, #aaa),
      color-stop(41%, #333),
      to(red)
    );
    background-image: linear-gradient(to top, #eee, #aaa 40%, #333 41%, red);
    -webkit-background-clip: text;
    background-clip: text;
    // color: transparent;
    -webkit-text-fill-color: transparent;
    margin: 20px;
  }

  .title1 {
    text-shadow: 2px 2px yellow;
    color: #000;
    font-size: 30px;
    font-weight: bold;
  }

  .title2 {
    -webkit-text-stroke: 1px yellow;
    color: #000;
    font-size: 30px;
    font-weight: bold;
  }

  .text {
    color: rgba(146, 45, 45, 0.55);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.4;
  }
}

//定义星空背景用shadow来循环生成
@function getShadows($n) {
  $Shadows: "#{random(100)}vw #{random(100)}vh #fff";

  @for $i from 2 to $n {
    $Shadows: "#{$Shadows}, #{random(100)}vw #{random(100)}vh #fff";
  }

  @return unquote($Shadows);
}

$duration: 50s; //滚动时间
$count: 200; //星空的数量
//循环生成星空，layer1到layer4
@for $i from 1 to 5 {
  $duration: floor($duration/2);
  $count: floor($count/2);

  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    // background-color: rgba(0, 0, 0, 0.032);
    border-radius: 50%;
    top: 0;
    left: 0;
    -webkit-box-shadow: getShadows($count);
    box-shadow: getShadows($count);
    -webkit-animation: moveUp $duration linear infinite;
    animation: moveUp $duration linear infinite;

    &::after {
      content: "";
      position: fixed;
      left: 0;
      top: -100vh;
      border-radius: inherit;
      -webkit-box-shadow: inherit;
      box-shadow: inherit;
      width: $size;
      height: $size;
    }
  }
}
//滚动的动画，无限像Y轴滚动，
@-webkit-keyframes moveUp {
  100% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
}
@keyframes moveUp {
  100% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
}

/* 将关键帧应用到所需元素 */
h1 {
  animation-name: flow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

